<template>
    <view>
        <!-- components/payPopup/index.wxml -->
        <van-popup :show="showClone" position="bottom" :round="true" :closeable="true" @close="onClose" @after-leave="afterLeave">
            <view>
                <view class="title">
                    <text>选择支付方式</text>
                </view>
                <van-radio-group :value="payway" @change="onChange">
                    <view
                        class="item_container"
                        :style="item == 'cqb' && !afford ? 'opacity: 0.6;' : ''"
                        :data-item="item"
                        @tap="onPaywayClick"
                        v-for="(item, index) in payInfo.wayCodeList"
                        :key="index"
                    >
                        <view style="display: flex; flex-direction: row; align-items: center">
                            <block v-if="item == 'cqb'">
                                <van-icon class-prefix="iconfont" name="jifenzhifu" size="56rpx" color="#FFCF02" />
                            </block>
                            <block v-else-if="item == 'wx_jsapi'">
                                <van-icon class-prefix="iconfont" name="weixinzhifu" size="56rpx" color="#28C445" />
                            </block>
                            <block v-else></block>
                            <view style="display: flex; flex-direction: column; margin-left: 24rpx; flex: 1">
                                <text class="pay_type">{{ dict.payWayName(item) }}</text>
                                <view v-if="item == 'cqb'">
                                    <view v-if="afford" class="pay_desc">剩余{{ payInfo.cqbf / 100 }}春秋币</view>
                                    <view v-else class="pay_desc">余额不足，剩余{{ payInfo.cqbf / 100 }}春秋币</view>
                                </view>
                            </view>
                            <van-radio :disabled="item == 'cqb' && !afford" :name="item" checked-color="#3CBB2F"></van-radio>
                        </view>

                        <view style="background-color: #e8e8e8; height: 1rpx; margin: 32rpx 0 0 64rpx"></view>
                    </view>
                </van-radio-group>
            </view>
        </van-popup>
    </view>
</template>
<script module="dict" lang="wxs" src="@/wxs/dict.wxs"></script>
<script>
// components/payPopup/index.js
export default {
    data() {
        return {
            payway: '',
            afford: '',
            showClone: false
        };
    },
    mixins: [require('miniprogram-computed').behavior],
    props: {
        show: {
            type: Boolean,
            default: false
        },
        payInfo: {
            type: Object,
            default: () => ({
                cqbf: '',
                wayCodeList: []
            })
        },
        amountYuan: {
            type: String,
            default: '0'
        }
    },
    computed: {
        afford(data) {
            return parseFloat(data.amountYuan) * 100 <= parseFloat(data.payInfo.cqbf);
        }
    },
    methods: {
        onClose() {
            this.setData({
                showClone: false
            });
        },
        onChange(event) {
            let payway = event.detail;
            this.setData({
                showClone: false
            });
            this.$emit('choosePayway', {
                detail: payway
            });
        },
        afterLeave() {
            this.setData({
                payway: ''
            });
        },
        onPaywayClick(e) {
            let payway = e.currentTarget.dataset.item;
            if (payway == 'cqb' && !this.afford) {
                // 余额不足无法点击
            } else {
                this.setData({
                    showClone: false,
                    payway: payway
                });
                this.$emit('choosePayway', {
                    detail: payway
                });
            }
        }
    },
    created: function () {},
    watch: {
        show: {
            handler: function (newVal, oldVal) {
                this.showClone = newVal;
            },

            immediate: true
        }
    }
};
</script>
<style>
@import './index.css';
</style>
